import React, { useEffect, useState } from "react";
import {
  Form,
  Row,
  Col,
  Input,
  Select,
  Radio,
  Switch,
  Cascader,
  TimePicker,
  DatePicker,
} from "antd";

import { DownOutlined } from "@ant-design/icons";

export const SearchFormWarpper = (props) => {
  const {
    searchFormSetting = {},
    handlequeryFinish,
    searchFormMenuSlot,
    searchForm,
  } = props;
  const { Option } = Select;

  const { RangePicker } = DatePicker;

  const [expand, setExpand] = useState(false);
  const [formColumns, setFormColumns] = useState([]);

  useEffect(() => {
    // console.log("expand", searchFormSetting);
    const data = searchFormSetting?.columns?.length
      ? searchFormSetting.columns
      : [];
    if (!searchFormSetting.expand) {
      setFormColumns(data);
    } else {
      const list = searchFormSetting.maxFormLength
        ? data.slice(0, searchFormSetting.maxFormLength)
        : data.slice(0, 3);
      setFormColumns(list);
    }
  }, []);

  const onFinish = (values) => {
    handlequeryFinish(values);
  };

  const onExpand = () => {
    setExpand(!expand);
    // console.log("expand", expand);
    if (!expand) {
      setFormColumns(searchFormSetting.columns);
    } else {
      const list = searchFormSetting.columns.slice(0, 3);
      setFormColumns(list);
    }
  };

  return (
    <div className="SearchFormWarpper">
      <Form
        layout="inline"
        form={searchForm}
        onFinish={onFinish}
        autoComplete="off"
        labelCol={{
          flex: searchFormSetting.labelCol
            ? `${searchFormSetting.labelCol}px`
            : "100px",
        }}
        labelAlign={searchFormSetting.labelAlign || "right"}
        labelWrap={
          !searchFormSetting.labelWrap ? false : searchFormSetting.labelWrap
        }
        wrapperCol={{ flex: 1 }}
      >
        <Row gutter={24} style={{ width: "100%" }}>
          {formColumns.map((item, index) => (
            <Col
              style={{
                marginBottom: "24px",
                display:
                  !item.disPlay || item.disPlay == "block" ? "block" : "none",
              }}
              span={item.row ? 24 : searchFormSetting.span}
              xs={24}
              sm={24}
              md={12}
              lg={item.row ? 24 : searchFormSetting.span}
              xl={item.row ? 24 : searchFormSetting.span}
              xxl={item.row ? 24 : searchFormSetting.span}
              key={index}
            >
              <Form.Item
                name={item.name}
                label={item.label}
                valuePropName={item.valuePropName}
                rules={item.rules}
              >
                {!item.slot && (!item.formType || item.formType == "input") ? (
                  <Input
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : `请输入 ${item.label}`
                    }
                    allowClear={item.allowClear}
                    disabled={item.disabled}
                    readOnly={item.readOnly}
                  ></Input>
                ) : !item.slot && item.formType == "select" ? (
                  <Select
                    mode={item.multiple ? "multiple" : ""}
                    showSearch={item.showSearch}
                    optionFilterProp={item.optionFilterProp || "label"}
                    allowClear={item.allowClear}
                    disabled={item.disabled}
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : `请选择 ${item.label}`
                    }
                    options={item.dicData || []}
                  />
                ) : !item.slot && item.formType == "textarea" ? (
                  <Input.TextArea
                    maxLength={item.maxLength || ""}
                    showCount={item.showCount}
                    autoSize={item.autoSize || { minRows: 2, maxRows: 6 }}
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : `请输入 ${item.label}`
                    }
                    allowClear={item.allowClear}
                    disabled={item.disabled}
                    readOnly={item.readOnly}
                  />
                ) : !item.slot && item.formType == "cascader" ? (
                  <Cascader
                    options={item.dicData}
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : `请输入 ${item.label}`
                    }
                    disabled={item.disabled}
                  />
                ) : !item.slot && item.formType == "datePicker" ? (
                  <DatePicker
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : `请输入 ${item.label}`
                    }
                    picker={item.picker}
                    disabled={item.disabled}
                    showTime={item.showTime}
                    style={{ width: "100%" }}
                  />
                ) : !item.slot && item.formType == "timePicker" ? (
                  <TimePicker
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : `请输入 ${item.label}`
                    }
                    style={{ width: "100%" }}
                  />
                ) : !item.slot && item.formType == "rangePicker" ? (
                  <RangePicker
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : ["开始时间", "结束时间"]
                    }
                    showTime={item.showTime}
                    picker={item.picker}
                    style={{ width: "100%" }}
                  />
                ) : (
                  item.component
                )}
              </Form.Item>
            </Col>
          ))}
          {searchFormMenuSlot !== "undefined" ? (
            <Col
              style={{ marginBottom: "24px" }}
              span={searchFormSetting.menuRow ? 24 : searchFormSetting.span}
              xs={24}
              sm={24}
              md={12}
              lg={searchFormSetting.menuRow ? 24 : searchFormSetting.span}
              xl={searchFormSetting.menuRow ? 24 : searchFormSetting.span}
              xxl={searchFormSetting.menuRow ? 24 : searchFormSetting.span}
            >
              {searchFormMenuSlot}
              {formColumns.length && searchFormSetting.expand ? (
                <a
                  style={{ fontSize: 12, marginLeft: "5px" }}
                  onClick={() => onExpand()}
                >
                  <DownOutlined rotate={expand ? 180 : 0} />
                  {!expand ? " 展开" : " 收起"}
                </a>
              ) : (
                ""
              )}
            </Col>
          ) : (
            ""
          )}
        </Row>
      </Form>
    </div>
  );
};

export default SearchFormWarpper;
